<template>
  <div class="all">
    <header>
      <div class="div">
        <img src="../../../assets/返回.png" @click="back()" alt="">
        <span class="solid" @click="back()">返回</span>
      </div>
      <div class="div">
        <span v-show="id === ''">新增随笔</span>
        <span v-show="id !== '' && isEdit === 1">随笔修改</span>
        <span v-show="isEdit === 0">随笔查看</span>
      </div>
      <div class="div">
        <span class="solid" @click="keep()" v-show="isEdit !== 0">保存</span>
      </div>
    </header>
    <ul class="ulList">
      <li @click="[isEdit === 0 ? menuShow = false : menuShow = true]">
        <span>所属模块</span>
        <span>
          <input placeholder="所属模块" readonly v-model="menu_name" type="text">
          <img src="../../../assets/下弹灰@2x.png" alt="">
        </span>
      </li>
      <li>
        <span>记录摘要</span>
        <span>
          <input placeholder="请输入记录摘要" :readonly="isEdit === 0" v-model="title" type="text">
        </span>
      </li>
      <li>
        <span>记录内容</span>
      </li>
    </ul>
    <div class="textareaDiv">
      <textarea name="" id="" cols="30" rows="10"
                v-model="content"
                :readonly="isEdit === 0"
                placeholder="请输入内容" maxlength="2000"></textarea>
      <span style="font-size: 11px;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
display: flex;
flex-direction: row-reverse;margin-right: 10px">
<!--              {{content.length}}/2000-->
              限2000字以内
        </span>
    </div>
    <van-popup v-model="menuShow" round position="bottom">
      <van-picker
        title="请选择模块"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="menuShow = false"
      />
<!--      :default-index="defaultIndex"-->
    </van-popup>
  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'AddEssay',
  data () {
    return {
      columns: [],
      menuShow: false,
      menu_name: '',
      menu_id: '',
      title: '',
      content: '',
      id: this.$route.query.id,
      isEdit: Number(this.$route.query.isEdit),
      xiangmuList: []
    }
  },
  mounted () {
    if (this.id === undefined || this.id === null) {
      this.id = ''
    } else {
      this.getHisData()
    }
    this.getMenu()
    // console.log($(window).height() - $('.textareaDiv').offset().top - 50)
    // $('.textareaDiv').css({height: $(window).height() - $('.textareaDiv').offset().top - 50 + 'px'})
  },
  methods: {
    getHisData () {
      this.$http.findById({id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.menu_name = res.data.data.menu_name
            this.menu_id = res.data.data.menu_id
            this.title = res.data.data.title
            this.content = res.data.data.content
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 项目类型确认按钮
    onConfirm (value, index) {
      this.menu_name = value.text
      this.menu_id = value.ID
      this.menuShow = false
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 获取项目菜单
    getMenu () {
      this.$http.getMenus({USER_ID: ''})
        .then(res => {
          console.log(res)
          // items: [
          //   { text: '浙江', children: [], dot: true },
          //   { text: '江苏', children: [], badge: 5 },
          // ],
          for (let i in res.data) {
            if (res.data[i].MENU_URL !== '#') {
              let obj = {
                text: res.data[i].MENU_NAME,
                ID: res.data[i].ID
              }
              // let ott = {
              //   text: res.data[i].MENU_NAME,
              // }
              // this.xiangmuList.push(ott)
              this.columns.push(obj)
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    keep () {
      if (this.content === '' || this.content === undefined || this.content === null) {
        Toast('请输入内容')
        return false
      }
      this.addData()
    },
    addData () {
      let obj
      if (this.id !== '') {
        // obj = {
        //   menu_id: this.menu_id,
        //   title: this.title,
        //   content: this.content,
        //   id: this.id
        // }

      } else {
        // obj = {
        //   menu_id: this.menu_id,
        //   title: this.title,
        //   content: this.content,
        //   id: 0
        // }
        this.id = ''
      }
      this.$http.addEssay({menu_id: this.menu_id, title: this.title, content: this.content, id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            Toast('保存成功')
            this.$router.history.go(-1)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }

}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #fff;
    font-family: "PingFang SC";
  }
   header{
       width: 100%;
       height: 44px;
       display: flex;
       align-items: center;
       border-bottom: 1px solid #E5E5E5;
       background: white;
       position: sticky;
       top: 0;
       z-index: 9;
     }
     .div{
       width: 33%;
       height: 100%;
       display: flex;
       align-items: center;
       font-family: "PingFang SC";
       font-size: 15px;
       font-weight: bold;
     }
     .div img{
       margin-right: 5px;
     }
     .div:nth-child(1) img{
       height: 13px;
       width: 7px;
       margin-left: 15px;
     }
     .div:nth-child(3) img{
       margin-right: 5px;
     }
     .div:nth-child(3) span{
       margin-right: 15px;
     }
     .div:nth-child(2){
       justify-content: center;
     }
     .div:nth-child(3){
       justify-content: flex-end;
     }
     .solid{
       color: #1DA4F2;
     }
  .ulList{
    width: 100%;
    background: white;
  }
  .ulList li{
    width: 95%;
    margin: 0 auto;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-family: "PingFang SC";
    border-bottom: 1px solid #E5E5E5;
  }
  .ulList li:last-child{
    border-bottom: none
  }
  .ulList li span{
    display: flex;
    align-items: center;
  }
  .ulList li img{
    width: 13px;
    height: 7px;
  }
  li input{
    text-align: right;
    border: none;
    margin-right: 5px;
  }
  .textareaDiv{
    /*width: 100%;*/
    /*height: 395px;*/
    width: 95%;
    height: calc(100vh - 44*2px - 45*2px - 10px);
    background: #FAF9FE;
    border-radius: 10px;
    border: none;
    margin: 0 2%;
    box-sizing: border-box;
    font-family: PingFang SC;
    font-weight: 500;
    overflow: hidden;
  }
  .textareaDiv textarea{
    width: 100%;
    height: 93%;
    background: #FAF9FE;
    border: none;
    resize: none;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    overflow: auto;
    padding: 10px;
    box-sizing: border-box;
  }
</style>
